<template>
  <div class="wrapper"></div>
</template>

<script>
import {
  isEqual,
  uniqWith,
  uniqBy,
  cloneDeep,
  sortBy,
  throttle,
  debounce,
} from "lodash";
let array = [
  {
    id: "1",
    name: "lina",
    year: 18,
  },
  {
    id: "2",
    name: "luna",
    year: 18,
  },
  {
    id: "1",
    name: "lulu",
    year: 20,
  },
  {
    id: "2",
    name: "malena",
    year: 20,
  },
];
export default {
  name: "LodashComponent",
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    test() {
      // 前端遇到数据处理：
      // 首先看一下lodash中是否有现成的方法，要善于利用工具，提升效率
      // 1.数组去重 isEqual, uniqWith, uniqBy,

      // 数组去重除了使用js自带的set方法，还可以用lodash的uniq方法
      const num = [1, 2, 3, 4, 4, 3];
      const differNum = [...new Set(num)];
      console.log(differNum);
      // [1, 2, 3, 4];
      // 但当数组为数组对象时，set方法便不能进行去重

      // 利用lodash对（对象）数组去重
      // 使用场景：
      // 根据数（对象）组中的id或者其他属性去重，或者对象中的所有属性值相同的去重
      // 传统方法：
      // 通过数组的some进行逐项判断；

      let list = uniqBy(array, "id");
      console.log("根据id去掉相同的元素");
      console.log(list);
      let list1 = uniqBy(array, "year");
      console.log("根据year去掉相同的元素");
      console.log(list1);
      let list2 = uniqWith(array, isEqual);
      console.log("检查数组每一项进行去重");
      console.log(list2);
      console.log("原数组");
      console.log(array);

      // 2.深拷贝 cloneDeep
      // 传统方法：
      // 通过JSON.parse(JSON.stringify())进行深拷贝
      // 但是这种方法有局限性，比如对象中有函数，undefined，symbol等属性时，会被忽略掉
      // 通过lodash的cloneDeep进行深拷贝
      let obj = {
        name: "lina",
        age: 18,
        say: function () {
          console.log("hello");
        },
      };
      let obj1 = cloneDeep(obj);
      console.log("深拷贝后的对象");
      console.log(obj1);

      // 3.数组对象排序
      // 传统方法：
      // 通过数组的sort方法进行排序
      // 通过lodash的sortBy进行排序
      let arr = [
        {
          name: "lina",
          age: 18,
        },
        {
          name: "luna",
          age: 20,
        },
        {
          name: "lulu",
          age: 19,
        },
      ];
      let arr1 = arr.sort((a, b) => {
        return a.age - b.age;
      });
      console.log("传统方法排序");
      console.log(arr1);
      // 传统方法排序，升序和降序
      let arr5 = arr.sort((a, b) => {
        return a.age - b.age;
      });
      console.log("传统方法升序");
      console.log(arr5);
      let arr6 = arr.sort((a, b) => {
        return b.age - a.age;
      });
      console.log("传统方法降序");
      console.log(arr6);
      let arr2 = sortBy(arr, "age");
      console.log("lodash方法排序");
      console.log(arr2);
      // 升序和降序
      let arr3 = sortBy(arr, function (item) {
        return item.age;
      });
      console.log("升序");
      console.log(arr3);
      let arr4 = sortBy(arr, function (item) {
        return -item.age;
      });
      console.log("降序");
      console.log(arr4);
      // 4.节流和防抖
      // 应用场景：
      // 当用户高频率的触发事件，事件较短，内部出现卡顿现象
      // 主要目的是为了降低高频事件触发，减少dom操作或请求次数，提升性能
      // 简单理解：节流相当于技能cd，防抖相当于回城。
      // 传统方法：
      // 通过setTimeout和clearTimeout进行节流和防抖
      // 通过lodash的throttle和debounce进行节流和防抖
      // 传统方法节流
      /* 
      
      function throttle(fn, delay) {
        let timer = null;
        return function () {
          if (!timer) {
            timer = setTimeout(() => {
              fn.apply(this, arguments);
              timer = null;
            }, delay);
          }
        };
      }
      // 传统方法防抖
      function debounce(fn, delay) {
        let timer = null;
        return function () {
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            fn.apply(this, arguments);
          }, delay);
        };
      }
      
      */

      // lodash方法节流

      // 5.数组对象分组
    },
  },
  created() {
    this.test();
  },
  mounted() {},
};
</script>
<style scoped>
.wrapper {
}
</style>
